<template>
    <div class="m-spellingitem" @click="toSpellingDetail(spelling.id)">
        <img :src="spelling.Cover" alt="">
        <p class="m-s-title">
            <span v-if="spelling.Type==1">[卡项]</span>
            <span v-if="spelling.Type==2">[项目]</span>
            <span v-if="spelling.Type==3">[产品]</span>
            {{spelling.ProjectName}}</p>
        <div class="m-price">
            <div>
                <span>&yen;{{spelling.Price}}</span>
                <em>已拼{{spelling.HasSpellingNum}}件</em>
            </div>
            <to-collage class="m-toCollage">去开团</to-collage>
        </div>
    </div>
</template>
<script>
export default {
    name:'',
    props:['spelling'],
    data () {
        return {
            base_url:process.env.API_HOST,
        }
    },
    components: {
        toCollage:()=>import('./toCollege'),
    },
    methods: {
        toSpellingDetail(id) {
            this.$router.push({name:'spellingDetail',query:{id:id}});
        }
    },
    mounted() {
        let that = this;
    }
}
</script>
<style lang="less" scoped>
.m-spellingitem{
    background: white;
    padding: 0 .6rem;
    img{
        width: 100%;
        margin-left: -.6rem;
        margin-right: -.6rem;
    }
    .m-s-title{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        span{
            color: @primary-green;
            font-size: .6rem;
            margin-right: .2rem;
        }
    }
    .m-price{
        .flex;
        justify-content: space-between;
        border-top: 1px solid @background-gray;
        margin-top: .4rem;
        padding: .4rem 0;
        span{
            color: @primary-red;
        }
        em{
            color: @light-gray;
            font-size: .7rem;
            display: block;
        }
    }
}
.m-toCollage{
    color: white;
    position: relative;
    padding-right: .4rem;
    &::after{
        position: absolute;
        display: inline-block;
        content: '';
        right: .4rem;
        top: 50%;
        width: .4rem;
        height: .4rem;
        border-right: 1px solid white;
        border-bottom: 1px solid white;
        transform: translateY(-50%) rotate(-45deg);
    }
}
</style>
